<template>
	<view>
		<view class="top_img">
			<img :src="baseUrl + (attrinfoData.big_image || configData.top_image)" alt="" mode="widthFix" style="width: 100%;" v-if="(attrinfoData.big_image || configData.top_image)">
		</view>
		<view class="search" v-if="id != 2">
			<u-input placeholder="输入搜索内容"  prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" readonly @tap="toSearch">
				<template slot="suffix"> <text class="search_text">搜索</text> </template>
			</u-input>
		</view>
		<!-- 产品分类和列表，横向tabs -->
		<view class="center2" v-if="id == 3 || id==4">
			<u-sticky bgColor="#fff" >
				<view class="" style="border-bottom: 2rpx solid #F8F8F8">
					<u-tabs :list="attrList" @click="click" lineColor="#CE3026" lineWidth="92rpx" :activeStyle="{ color: '#CE3026'}" ></u-tabs>
				</view>
			</u-sticky>
			<u-empty mode="car" icon="/static/images/default_empty.png" text="当前暂无内容" v-if="articlelists.length <= 0"></u-empty>
			<view class="" v-else>
				<view class="item" v-for="(item,index) in articlelists" @click="toDetail(item)">
					<view class="img">
						<img :src="baseUrl + item.image" alt="" mode="widthFix">
					</view>
					<view class="info">
						<view class="title u-line-1">
							{{item.name}}
						</view>
						<view class="desc u-line-2">
							{{item.subtitle}}
						</view>
						<!-- <rich-text class="desc u-line-2" :nodes="item.content"></rich-text> -->
					</view>
				</view>
				<view style="text-align: center;">
					<u-loadmore :status="status" :loading-text="loadingText"  :loadmore-text="loadmoreText"  :nomore-text="nomoreText"/>
				</view>
			</view>
		</view>
		<!-- 产品分类和列表，纵向tabs -->
		<view class="center" :class="{'center_nosearch':id == 2}" v-else>
			<scroll-view class="left" scroll-y>
				<view class="left_content">
					<view class="item" v-for="(item,index) in attrList" :key="item.id">
						<view class="item_title u-line-1"  @click="titleClick(item)" :class="{'hasSon':item.sons&&item.sons.length >0, 'acitve': item.id == activeId,'unfold':item.id == activeId&&unfold}">
							{{item.name}}
						</view>
						<view class="item_sons" v-if="item.sons"  :style="{height:item.id == activeId&&item.sons&&item.sons.length >0&&unfold? (item.sons.length*88+'rpx'):'0rpx'}">
							<view class="item_son u-line-1" v-for="(son,i) in item.sons" :key="son.id" :class="{'active': son.id == activeSonId}" @click="sonClick(son,item)">
								{{son.name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 右侧产品列表 -卡片模式，一行两个 -->
			<scroll-view class="right2" scroll-y v-if="id == 2" @scrolltolower="getArticlelist(attrId)">
				<view class="right2_content">
					<u-empty mode="car" icon="/static/images/default_empty.png" text="当前暂无内容" v-if="articlelists.length <= 0"></u-empty>
					<view class="list" v-else>
						<view class="item" v-for="(item,index) in articlelists" @click="toDetail(item)" :key="item.id">
							<view class="img">
								<img :src="baseUrl + item.image" alt="" mode="widthFix">
							</view>
							<view class="info">
								<view class="title u-line-1">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
					<view style="text-align: center;" v-if="articlelists.length > 0">
						<u-loadmore :status="status" :loading-text="loadingText"  :loadmore-text="loadmoreText"  :nomore-text="nomoreText"/>
					</view>
				</view>
			</scroll-view>
			<!-- 右侧产品列表，列表模式 -->
			<scroll-view class="right" scroll-y v-else @scrolltolower="getArticlelist(attrId)">
				<view class="right_content">
					<u-empty mode="car" icon="/static/images/default_empty.png" text="当前暂无内容" v-if="articlelists.length <= 0"></u-empty>
					<view class="list" v-else>
						<view class="item" v-for="(item,index) in articlelists" @click="toDetail(item)" :key="item.id">
							<view class="img">
								<img :src="baseUrl + item.image" alt="" mode="widthFix">
							</view>
							<view class="info">
								<view class="title u-line-1">
									{{item.name}}
								</view>
								<rich-text class="desc u-line-2" :nodes="item.content"></rich-text>
							</view>
						</view>
					</view>
					<view style="text-align: center;" v-if="articlelists.length > 0">
						<u-loadmore :status="status" :loading-text="loadingText"  :loadmore-text="loadmoreText"  :nomore-text="nomoreText"/>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/api/request.js'
	import {
		attr,articlelist,config,attrinfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				id:'',
				attrinfoData:{},// 配置信息
				attrList:[], // 分类信息
				articlelists:[], // 文章列表
				activeId:'', //选中的分类ID
				activeSonId:'', // 子分类
				attrId:'', // 顶级分类
				unfold:false, // 是否展开
				baseUrl, 
				configData:{}, // 配置信息 - 不需要了 替换为 attrinfoData
				
				page: 0,
				size:10,
				total:0,
				status:'loadmore',
				loadingText: '正在拼命加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有更多了~',
			};
		},
		onLoad(options){
			uni.setNavigationBarTitle({
				title: options.name
			})
			this.id = options.id
			this.getAttr()
			this.getConfig()
		},
		onReachBottom(){
			this.getArticlelist(this.attrId)
		},
		methods:{
			getConfig(){
				config().then(res=>{
					this.configData = res.data
				})
			},
			getAttrinfo(){
				attrinfo({id:this.activeId}).then(res=>{
					this.attrinfoData = res.data
				})
			},
			getAttr(){
				attr({id:this.id}).then(res=>{
					this.attrList = res.data || []
					if(this.attrList.length > 0){
						let attr = this.attrList[0]
						this.activeId = attr.id
						this.attrId = attr.id
						// this.getArticlelist(attr.id)
						if(attr.sons && attr.sons.length > 0){
							this.activeSonId = attr.sons[0].id
							this.unfold = true
							this.getArticlelist(attr.sons[0].id)
						}else {
							this.getArticlelist(attr.id)
						}
						
					}
				})
			},
			getArticlelist(attrId, reset = false){
				console.log(attrId, reset)
				if(reset){
					this.page = 0
					this.status = 'loadmore'
					this.articlelists = []
				}else if(this.status == 'nomore'){
					return
				}
				this.page++
				this.status = 'loading'
				articlelist({id:attrId,page:this.page}).then(res=>{
					this.articlelists.push(...res.data.data)
					this.total = res.data.total
					if(this.total <= this.articlelists.length){
						this.status = 'nomore'
					}else {
						this.status = 'loadmore'
					}
				})
				this.getAttrinfo()
			},
			click(item){
				this.getArticlelist(item.id, true)
			},
			toDetail(item){
				if(item.enum == '产品'){
					uni.navigateTo({
						url:'/pages/product/question?id=' + item.id
					})
				}else  {
					uni.navigateTo({
						url:`/pages/product/detail?id=${item.id}&pId=${this.id}`
					})
				}
			},
			toSearch(){
				uni.navigateTo({
					url:'/pages/product/search?id=' + this.id
				})
			},
			
			
			titleClick(item){
				console.log(item);
				if(this.activeId==item.id){
					this.unfold = !this.unfold
				}else {
					this.unfold = true
					this.activeId = item.id
					this.attrId = item.id
					if(item.sons && item.sons.length > 0){
						if(this.activeSonId != item.sons[0].id){
							this.activeSonId = item.sons[0].id
							this.getArticlelist(item.sons[0].id,true)
						}
					}else {
						this.getArticlelist(item.id, true)
					}
				}
			},
			sonClick(son,item){
				if(this.attrId == son.id){
					
				}else {
					this.activeId = item.id
					this.attrId = son.id
					this.activeSonId = son.id
					this.getArticlelist(son.id, true)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}
	view {
		box-sizing: border-box;
	}
	.top_img {
		width: 100%;
		height: 336rpx;
		overflow: hidden;
	}
	.search {
		padding: 18rpx 32rpx;
		background-color: #fff;
		&_text {
			font-size: 28rpx;
			font-weight: 600;
			color: #CE3026;
			line-height: 48rpx;
		}
	}
	.center {
		margin-top: 20rpx;
		display: flex;
		height: calc(100vh - 468rpx);
	}
	.center_nosearch {
		height: calc(100vh - 336rpx);
		margin-top: 0;
	}
	// 类目横向滚动时
	.center2 {
		margin-top: 20rpx;
		background-color: #fff;
		min-height: calc(100vh - 468rpx);
		padding-bottom: env(safe-area-inset-bottom);
		.item {
			padding: 20rpx 40rpx 20rpx 32rpx;
			display: flex;
			.img {
				width: 176rpx;
				img {
					width: 176rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				margin-right: 20rpx;
			}
			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}
			.desc {
				font-size: 24rpx;
				margin-top: 10rpx;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}
	}
	.left {
		height: 100%;
		width: 230rpx;
		box-sizing: border-box;
		&_content {
			padding-bottom: env(safe-area-inset-bottom);
		}
		.item {
			width: 230rpx;
			&_title{
				position: relative;
				width: 230rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #666666;
				height: 88rpx;
				line-height: 88rpx;
				border-left: 8rpx solid #f8f8f8;
				transition: background-color 0.3s ease-in-out;
			}
			&_title.acitve {
				border-left-color: #C62E23;
				background-color: #fff;
				font-weight: 600;
				color: #333333;
			}
			.hasSon::after{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 20rpx;
				width: 0;
				height: 0;
				border-top: 8rpx solid transparent;
				border-left: 8rpx solid #333333;
				border-bottom: 8rpx solid transparent;
				display: block;
				content: '';
				z-index: 10;
			}
			.unfold.hasSon::after{
				border-top: 8rpx solid #333333;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
			}
			
			.item_sons {
				height: 0;
				overflow: hidden;
				background-color: #fff;
				border-left: 8rpx solid #f8f8f8;
				transition: height 0.3s ease-in-out;
				.item_son {
					width: 230rpx;
					padding: 0 30rpx;
					font-size: 28rpx;
					color: #666666;
					height: 88rpx;
					line-height: 88rpx;
				}
				.item_son.active {
					color: #CE3026;
				}
			}
		}
	}
	.right {
		height: 100%;
		width: calc(100% - 230rpx);
		background-color: #fff;
		box-sizing: border-box;
		&_content {
			padding: 10rpx 0;
			padding-bottom: env(safe-area-inset-bottom);
		}
		.item {
			padding: 20rpx 40rpx 20rpx 32rpx;
			display: flex;
			.img {
				width: 176rpx;
				img {
					width: 176rpx;
				}
				margin-right: 20rpx;
			}
			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}
			.desc {
				font-size: 24rpx;
				margin-top: 10rpx;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}
	}
	// 右侧卡片模式，一行两个
	.right2 {
		height: 100%;
		width: calc(100% - 230rpx);
		background-color: #fff;
		box-sizing: border-box;
		&_content {
			padding: 30rpx;
			padding-bottom: env(safe-area-inset-bottom);
		}
		.list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 20rpx 16rpx;
		}
		.item {
			min-width: 40%;
			max-width: calc(50% - 8rpx);
			flex:1;
			
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.img {
				width: 100%;
				img {
					width: 100%;
				}
			}
			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				padding-top: 8rpx;
				padding-bottom: 34rpx;
			}
		}
	}
	
</style>
